making a good stylesheet

when the user wants to print this page to paper, i strip the navigation and footer links:

@media print {
  nav, .status { display: none }
  pre          { overflow: visible; }
}

not much more needs to be done in this regard, since the site doesn't have a lot going on in the first place.

you can download any page on this site with a tool like wget. each page has a bit of inline css:

body,
.string,
.comment  {font-family: "Iosevka"}
code, pre {font-family: "IBM Plex Mono"}

body     { max-width: 50em; margin: auto; }
hr       { border: 2px solid #EEEEEE; }
html     { padding: 3%; }
pre      { overflow: auto; }
a:hover  { color: #338800; }

pre      { border-left: 3px solid #000000;
           padding-left: 20px; }

i try to keep this style small, so that it doesn't take up disk space. the whole site is also available in txt format (tarball).

this website is very clean on less featureful clients like lynx and eww. there's not much more to say about it :3

in my style.css file, i link to dark.css if the user's machine has a light-mode preference:

/* load theme based on system preference */

@import url("/dark.css")  (prefers-color-scheme: dark);
@import url("/light.css") (prefers-color-scheme: light);

i use variables to store color names, to make creating new color themes easy. for example, light.css looks like this:

/* light.css
 * dark.css looks just like this with
 * different colors. */

:root {
    --bg:       #FFFFFF;
    --fg:       #222222;
    --bg-dim:   #DDDDDD;      
    --fg-dim:   #888888;
    --bold:     #000000;
    --h1:       #222222;
    --link:     #0000BB;
    --link-hov: #448800;
}

if the user doesn't set a preference, the default inline stylesheet is cute enough :3!

the rest of style.css just uses these color variables and applies them throuought the site:

body {
 background: var(--bg);
 color:      var(--text);
}

pre {
 background:    var(--bg);
 color:         var(--bold);
}

/* ... */

and so far, that's what i consider to be a good css stylesheet. i'll improve this article in the future, too <3